<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <title>管理中心</title>
		<meta http-equiv="Pragma" CONTENT="no-cache">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="renderer" content="webkit">
		<%include("/common/include.html"){}%>
		<link rel="stylesheet" type="text/css" href="${cxt!}/sb/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="${cxt!}/sb/css/center.css">
		<!-- <style>
			.textbox{
				z-index:11111111111111;
			}
		</style> -->
   </head>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <style>
		.panel-title{
			 font-size:12px;
			 height:20px;
			 font-weight:lighter;
			 line-height:20px
		}
		.tabs li a.tabs-inner{
			border-width:0 0 1px 0;
		}
		.tabs li.tabs-selected a.tabs-inner{
			 border-bottom: 2px solid red;
			 background-color:#F8F8F8;
		}
		.col-md-3{
		width:16%;
		}
		.col-lg-9{
		width:100%;
		}
	</style> 
<body style="height: 100%; margin: 0;">
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">本月注册登记</p>	
							<p class="big">${zcdj!} 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">本月转移登记</p>	
							<p class="big">${zydj! } 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">本月变更登记</p>	
							<p class="big">${bgdj! } 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">本月注销登记</p>	
							<p class="big">${zxdj! } 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">本月补换号牌</p>	
							<p class="big">${bhhp!} 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">本月补换证件</p>	
							<p class="big">${bhzj!} 个</p>
		    			</div>
					</div>
		    	</div>
		    	<!-- <div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">当前日期</p>	
							<p class="big" id="currentDate"></p>
		    			</div>
					</div>
		    	</div>
				<input  id="zdMonth_datebox" name="bussdate" value='${date()}' class="easyui-datebox theme-textbox-radius" 
					style="height: 20px; width: 20px; text-align: center;z-index: 111111111111111111111;"/> -->
					
		  	</div>
			<div id="container" style="height: 85%;width:100%;margin-left:-65px;"></div>
<script type="text/javascript">
	
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop',
			'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft',
			'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ];
	//var dadui =['支队车管所', '平城区', '云岗区', '新荣区', '云州区', '左云县', '阳高县', '浑源县', '天镇县', '广灵县', '灵丘县'];
	/* var arr0 = [9,2,3,4,7];
	var arr1 = [5,9,3,2,5];
	var arr2 = [1,3,4,5,1];
	var arr3 = [2,4,3,2,3];
	var arr4 = [4,3,5,1,1];
	var arr5 = [1,6,8,2,5]; */
	app.configParameters = {
		rotate : {
			min : -90,
			max : 90
		},
		align : {
			options : {
				left : 'left',
				center : 'center',
				right : 'right'
			}
		},
		verticalAlign : {
			options : {
				top : 'top',
				middle : 'middle',
				bottom : 'bottom'
			}
		},
		position : {
			options : echarts.util.reduce(posList, function(map, pos) {
				map[pos] = pos;
				return map;
			}, {})
		},
		distance : {
			min : 0,
			max : 100
		}
	};

	app.config = {
		rotate : 90,
		align : 'left',
		verticalAlign : 'middle',
		position : 'insideBottom',
		distance : 15,
		onChange : function() {
			var labelOption = {
				normal : {
					rotate : app.config.rotate,
					align : app.config.align,
					verticalAlign : app.config.verticalAlign,
					position : app.config.position,
					distance : app.config.distance
				}
			};
			myChart.setOption({
				series : [ {
					label : labelOption
				}, {
					label : labelOption
				}, {
					label : labelOption
				}, {
					label : labelOption
				} ]
			});
		}
	};

	var labelOption = {
		normal : {
			show : false,
			position : app.config.position,
			distance : app.config.distance,
			align : app.config.align,
			verticalAlign : app.config.verticalAlign,
			rotate : app.config.rotate,
			formatter : '{c}  {name|{a}}',
			fontSize : 8,
			rich : {
				name : {
					textBorderColor : '#fff'
				}
			}
		}
	};
	
	option = {
		color : [ '#006699', '#4cabce', '#4b29a3','#a32993',  '#D1733A', '#cfb76e' ],
		title : {
	        text: '               ${businessdate}月下属各机构业务统计(单位:个)'
	        //subtext: '纯属虚构'
	    },
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				type : 'shadow'
			}
		},
		legend : {
			data : [ '注册登记', '转移登记', '变更登记', '注销登记', '补换号牌', '补换证件' ]
		},
		toolbox : {
			show : true,
			orient : 'vertical',
			left : 'right',
			top : 'center',
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'line', 'bar', 'stack', 'tiled' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			axisLabel: {
                show: true,
                textStyle: {
                	fontSize:'8'
                },
               /*  interval:0,  
                rotate:20 */
            },
			data : ${arr !}
		} ],
		yAxis : [ {
			type : 'value'
		} ],
		series : [ {
			name : '注册登记',
			type : 'bar',
			barGap : 0,
			label : labelOption,
			data : ${arr0 !}
		}, {
			name : '转移登记',
			type : 'bar',
			label : labelOption,
			data : ${arr1 !}
		}, {
			name : '变更登记',
			type : 'bar',
			label : labelOption,
			data : ${arr2 !}
		}, {
			name : '注销登记',
			type : 'bar',
			label : labelOption,
			data : ${arr3 !}
		}, {
			name : '补换号牌',
			type : 'bar',
			label : labelOption,
			data : ${arr4 !}
		}, {
			name : '补换证件',
			type : 'bar',
			label : labelOption,
			data : ${arr5 !}
		}]
	};
	
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}
</script>
<script type="text/javascript">
	/* $(document).ready(function () {
		dateFormatter();
	});
	function  dateFormatter(){
		$('#zdMonth_datebox').datebox({
		       //显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
		       onShowPanel: function () {
		          //触发click事件弹出月份层
		          span.trigger('click'); 
		          if (!tds)
		            //延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
		            setTimeout(function() { 
		                tds = p.find('div.calendar-menu-month-inner td');
		                tds.click(function(e) {
		                   //禁止冒泡执行easyui给月份绑定的事件
		                   e.stopPropagation(); 
		                   //得到年份
		                   var year = /\d{4}/.exec(span.html())[0] ,
		                   //月份
		                   //之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; 
		                   month = parseInt($(this).attr('abbr'), 10);  
		                   //month =(month<10 ? "0"+month:month); 
	
					         //隐藏日期对象                     
					         $('#zdMonth_datebox').datebox('hidePanel').datebox('setValue', year + '-' + month); 
					         $("#currentDate").html($("#zdMonth_datebox").val());
		                 });
		             }, 0);
		        },
		            //配置parser，返回选择的日期
		            parser: function (s) {
		                if (!s) return new Date();
		                var arr = s.split('-');
		                return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
		            },
		            //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); 
		            formatter: function (d) { 
		                var currentMonth = (d.getMonth()+1);
		                var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
		                return d.getFullYear() + '-' + currentMonthStr; 
		            }
		        });
	
		        //日期选择对象
		        var p = $('#zdMonth_datebox').datebox('panel'), 
		        //日期选择对象中月份
		        tds = false, 
		        //显示月份层的触发控件
		        span = p.find('span.calendar-text'); 
	
		        //设置前当月
		        var curr_time = new Date();
		        $("#zdMonth_datebox").datebox("setValue", myformatter(curr_time));
		       $("#currentDate").html($("#zdMonth_datebox").val());
	}
	
	//格式化日期
	function myformatter(date) {
	    //获取年份
	    var y = date.getFullYear();
	    //获取月份
	    var m = date.getMonth() + 1;
	    //m =(m<10 ? "0"+m:m); 
	    return y + '-' + m;
	} */
</script>
</body>
</html>
